<style> div.xtabs { position: relative; } div.xtabs > div { display: inline; } div.xtabs > div > a { /* They will be displayed in the same line. */ background: LightGrey; padding: 5px 10px; text-decoration: none; } div.xtabs > div > div { display: none; /* Initially none. When this content is targeted from its tab, it changes to block. */ position: absolute; /* Every content will be displayed at the same position */ top: 20px; left: 0px; } </style> <div class='xtabs'> <!-- container of tabs --> <div> <a>Motivations</a> <!-- the first tab; tabs should be displayed in a line. --> <div> <!-- content; initially not displayed --> Motivations ... </div> </div> <div> <a>Tabs using ...</a> <!-- the second tab --> <div> Tabs using the :target selector ... </div> </div> </div>Try the above code with runcode. Ask the instructor the username and the password to access the application.
<style> div.xtabs { position: relative; } div.xtabs > div { display: inline; } div.xtabs > div > a { background: LightGrey; padding: 5px 10px; text-decoration: none; } div.xtabs > div > div { display: none; position: absolute; top: 20px; left: 0px; } div.xtabs > div > a:hover { background: LightBlue; } </style> <div class='xtabs'> <div> <a>Motivations</a> <div> Motivations ... </div> </div> <div> <a>Tabs using ...</a> <div> Tabs using the :target selector ... </div> </div> </div>Try the above code with runcode. Ask the instructor the username and the password to access the application.
<style>
div.xtabs { position: relative; }
div.xtabs > div { display: inline; }
div.xtabs > div > a {
background: LightGrey;
padding: 5px 10px;
text-decoration: none;
}
div.xtabs > div > div {
display: none;
position: absolute;
top: 20px;
left: 0px;
}
div.xtabs > div > a:hover { background: LightBlue; }
div.xtabs > div:target > a { background: Aquamarine; }
</style>
<div class='xtabs'>
<div id='xitem1'>
<a href='#xitem1'>Motivations</a>
<div>
Motivations ...
</div>
</div>
<div id='xitem2'>
<a href='#xitem2'>Tabs using ...</a>
<div>
Tabs using the :target selector ...
</div>
</div>
</div>
<style>
div.xtabs { position: relative; }
div.xtabs > div { display: inline; }
div.xtabs > div > a {
background: LightGrey;
padding: 5px 10px;
text-decoration: none;
}
div.xtabs > div > div {
display: none;
position: absolute;
top: 20px;
left: 0px;
}
div.xtabs > div > a:hover { background: LightBlue; }
div.xtabs > div:target > a { background: Aquamarine; }
div.xtabs > div:target > div { display:block; }
</style>
<div class='xtabs'>
<div id='xitem1'>
<a href='#xitem1'>Motivations</a>
<div>
Motivations ...
</div>
</div>
<div id='xitem2'>
<a href='#xitem2'>Tabs using ...</a>
<div>
Tabs using the :target selector ...
</div>
</div>
</div>
<style> div.tabs { position:relative; } /* in order to provide all the descendent elements with easier positioning */ div.tabs > div.tab { display:???; } /* in order to list tabs in a line */ div.tabs > div.tab > input { display:???; } /* always not displayed */ div.tabs > div.tab > div.content { display:???; } /* initially not displayed */ ... </style> <div class='tabs'> <div class='tab'> <input type='radio' id='tab1' name='tab-group' checked> <!-- name: for grouping radio buttons, so that one of them can be checked --> <label for='tab1'>Contact</label> <!-- When this label is clicked, the input of id 'tab1' is checked. --> <div class='content'> ... Content ... </div> </div> <div class='tab'> <input type='radio' id='tab2' name='tab-group'> <label for='tab2'>Education</label> <div class='content'> ... Education ... </div> </div> </div>Try the above code with runcode. Ask the instructor the username and the password to access the application.
<style> div.tabs { position: relative; } div.tabs > div.tab { display:inline; } div.tabs > div.tab > input { display:none; } div.tabs > div.tab > div.content { display:none; position: absolute; top: 100%; left: 0; width: 100%; height: 500px; border: 1px solid black; } div.tabs > div.tab > label:hover { background: LightBlue; } div.tabs > div.tab > input:checked ~ label { background: Aquamarine; } div.tabs > div.tab > input:checked ~ div.content { display: block; } </style>